/** 
 *仓库
 */
<template>
   <vp-main-page @refresh="loadDataList" :custom="false">
		<template #search>
			<el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="handleSearch" label-width="120px">
				<vp-search-row >
					<vp-search-col :span="2">
						<el-form-item prop="keyword">
							<template #label><vp-label-keyword/></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
					</vp-search-col>
				</vp-search-row>		
			</el-form>
		</template>
		<template #table>
			<vp-table 
				:data="tableData" 
				v-loading="loading" 
				ref="tableRef" 
				row-key="id"
			>
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column prop="bh" min-width="150" show-overflow-tooltip>
					<template #header><vp-label zh="仓库编号" en="No." /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.bh)"/>
					</template>
				</el-table-column>
				<el-table-column prop="mc" min-width="150" show-overflow-tooltip>
					<template #header><vp-label zh="仓库名称" en="Name" /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.mc)"/>
					</template>
				</el-table-column>
				<el-table-column prop="jdmc" show-overflow-tooltip min-width="150">
					<template #header><vp-label zh="基地" en="Base" /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.jdmc)"/>
					</template>
				</el-table-column>
				<el-table-column prop="lb" show-overflow-tooltip min-width="150">
					<template #header><vp-label zh="类别" en="Type" /></template>
					<template #default="scope">
						<vp-label v-if="scope.row.lb === 10" zh="可用库" en="Available Warehouse" />
						<vp-label v-else-if="scope.row.lb === 20" zh="待修库" en="To Be Repaired Warehouse" />
						<vp-label v-else-if="scope.row.lb === 30" zh="报废库" en="Scrap Warehouse" />
						<vp-label v-else-if="scope.row.lb === 40" zh="隔离库" en="Isolated Warehouse" />
					</template>
				</el-table-column>
				<el-table-column prop="yhxm" show-overflow-tooltip min-width="200">
					<template #header><vp-label zh="用户" en="Users"/></template>
				</el-table-column>
				<el-table-column fixed="right"  width="100">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn text type="primary" v-auth="'systemRole.edit'"  @click="handleUser(scope.row)"><vp-label zh="用户配置" en="User Config"/></vp-btn>
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>
		<EditRoleUser ref="editRoleUserRef" @formSubmited="loadDataList"></EditRoleUser>
	</vp-main-page>
</template>
<script setup lang="ts" name="functionRoleTable">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';

const EditRoleUser = defineAsyncComponent(() => import('./EditRoleUser.vue'));

	const searchForm = reactive({
		keyword: "",
	});

	const loading = ref(false);
	const tableData = ref([]);

	const loadDataList = () => {
		loading.value = true
		request.get('/system/user/warehouse/list', {
			params: {
				...searchForm,
			}
		}).then(res => {
			tableData.value = res?.data || []
		}).finally(()=>{
			loading.value = false
		})
	}
	const searchFormRef = ref();

	const handleSearch = ()=>{
		loadDataList()
	}
	const handleSearchReset = ()=>{
		searchFormRef.value.resetFields();
	}

	onMounted(() => {
		loadDataList()
	})

	const editRoleUserRef = ref();
	const handleUser = (row: any)=>{
		editRoleUserRef.value.handleOpen({
			id: row.id,
			type: 2,
		});
	}

	const tableRef = ref();


</script>